<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>安平一码通</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<style>
    *{
        background: #FFF6F6;
    }
    .layui-text{
        background: #F7E7E7 ;
        line-height: 16px;
        color: #FE000B;
        font-weight: bolder;
        font-size: 16px;
    }
    #send_str{
        background: #E60012;
    }
    .layui-input,
    .layui-textarea {
        width: 95%;
        background: #FDF0F0;
        border-color: #FDF0F0;
        border-radius: 4px;
    }

    .layui-form-item .layui-form-label {
        text-overflow: clip;
    }

    .input-code {
        width: 55%;
        display: inline;
    }

    #send_phone {
        padding: 0;
        width: 35%;
        float: right;
        margin-right: 15px;
        font-size: 12px;
    }

    .footer {
        text-align: center;
        font-size: 12px;
        color: #666666;
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .b {
        background-color: #cbcbcb;
    }

    .footer p {
        margin: 5px 0;
    }

    .layui-elem-quote {
        text-align: center;
        border-left: none;
    }
    .layui-btn{
        background-color: #E60012;
    }

    textarea{
        border: 1px solid #f0f0f0;
        resize: none;
        background: #FDF0F0;
    }
</style>

<body>

    <blockquote class="layui-elem-quote layui-text">
        入安人员出入登记
    </blockquote>

    <form class="layui-form" action="">
        <input type="hidden" name="wxcode" value="" id="wxcode" />
        <div class="layui-form-item">
            <label class="layui-form-label">登记地</label>
            <div class="layui-input-block">
                <input type="text" name="rukouName" lay-verify="required" lay-reqtext="请输入入口" autocomplete="off"
                    placeholder="请输入入口" class="layui-input layui_rukouName" value="南口" readonly>
            </div>
        </div>
        <div class="layui-form-item layui-form-name">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="请输入真实姓名" autocomplete="off"
                    placeholder="请输入姓名" class="layui-input layui_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号码</label>
            <div class="layui-input-block">
                <input type="text" name=" idCard" lay-verify="identity" placeholder="请输入身份证号码" autocomplete="off"
                    class="layui-input layui_idCard" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" id="L_phone" lay-verify="phone" lay-reqtext="请输入手机号"
                    placeholder="请输入手机号" autocomplete="off" class="layui-input layui_phone" >
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="text" name="code" lay-verify="code" lay-reqtext="请输入验证码" placeholder="请输入验证码"
                    autocomplete="off" class="layui-input input-code">
                <button type="button" class="layui-btn" id="send_phone">
                    <span id="send_str">获取验证码</span>
                </button>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">来源地</label>
            <div class="layui-input-block">
                <input type="text" name="comeFrom" lay-verify="required" lay-reqtext="城市/公司/小区/单位/部门" placeholder="城市/公司/小区/单位/部门"
                    autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">目的地</label>
            <div class="layui-input-block">
                <input type="text" name="goTo" lay-verify="required" lay-reqtext="公司/小区/单位/部门" placeholder="公司/小区/单位/部门"
                    autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">体温</label>
            <div class="layui-input-block">
                <input type="text" name="temperature" lay-verify="required" lay-reqtext="请输入今日体温" placeholder="请输入今日体温"
                    autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">协同人员</label>
            <div class="layui-input-block">
                <textarea id="vod_content" name="remarks" type="text/plain" style="width:90%;height:60px;padding: 2px 8px;" placeholder="老人或儿童"></textarea>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" style="width: 200px;">登记</button>
        </div>

    </form>

    <script src="./layui/layui.js" charset="utf-8"></script>
    <script src="./jquery/jquery.min.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的http://hesuan.city1000.cn/register.html?code=091E3t0009e5ZK1V2u000ShQDC0E3t0q -->
    <script>
        layui.use(['form', 'layer', 'jquery'], function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;
            $(document).ready(function () {
                //页面一进入拿code 
                // //alert(window.location.search)
                var code = getQueryVariable('code');
                var rukouName = getQueryVariable('state');
                // 把code放到隐藏的框里,一起提交
                $('#wxcode').val(code);
                // 从哪个口进来的显示在页面上
                $('.layui_rukouName').val(rukouName)
            });
            //自定义验证规则
            form.verify({
                phone: [/^1[3456789]\d{9}$/, "请输入正确的手机号"],
                identity: [/(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"],
                required2: function (value) {
                    var identity = $('input[name="identity"]:checked').val();
                    if (identity == 1) {
                        var reg = /[\S]+/;
                        if (!reg.test(value)) {
                            return '请输入单位名称';
                        }
                    }
                },
                code: function (value) {
                    if (!value || isNaN(value)) return "请填写正确的验证码"
                }
            });
            //锁
            var codeStatus = true;
            //发送验证码
            $('#send_phone').on('click', function () {
                var phone = $('#L_phone').val();
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(phone)) {
                    layer.msg('请输入正确的手机号', {
                        icon: 2
                    });
                    return false;
                }
                if (codeStatus) {
                    $.post('http://351hj04970.qicp.vip/api/hsVerificationCode', {
                        phone: phone
                    }, function (res) {
                        //请求成功
                        if (res.code == 0) {
                            codeStatus = false;
                            // console.log('111')
                            var setTime;
                            var time = 60;
                            setTime = setInterval(function () {
                                if (time == 0) {
                                    clearInterval(setTime);
                                    codeStatus = true;
                                    $("#send_phone").removeClass("b");
                                    $("#send_str").text("获取验证码");
                                    return;
                                } else {
                                    $("#send_phone").addClass("b");
                                    $("#send_str").text(time + "s后重新获取");
                                }
                                time--;
                            }, 1000);
                        } else {
                            layer.msg(res.msg, {
                                icon: 2
                            });
                        }
                    })
                }
            })
            //监听提交
            form.on('submit(demo1)', function (data) {
                console.log(data)
                var loadIndex;
                $.ajax({
                    url: 'http://351hj04970.qicp.vip/ymtUserRuan/insert',
                    data: data.field,
                    beforeSend: function () {
                        // 点击后阴影效果
                        loadIndex = layer.load(1, {
                            shade: [0.3, 'rgb(0, 0, 0)']
                        })
                    },
                    success: function (res) {
                        ////alert('提交成功的结果:' + res)
                        // 成功
                        if (res.code == 0) {
                            layer.msg('登记成功!!!', {
                                icon: 1,
                                time: 1
                            }, function () {
                                // 跳转到提交成功页面
                                window.location.href =
                                    'http://hesuan.city1000.cn/register/gocode.html'
                            });
                        } else {
                            // 失败
                            layer.msg(res.msg, {
                                icon: 2
                            });

                        }
                    },
                    error: function (err) {
                        ////alert(err.status)
                        layer.msg('系统维护更新中，请稍后...', {
                            icon: 2
                        });
                    },
                    complete: function () {
                        layer.close(loadIndex);
                    }
                });
                return false;
            });
        });
        // 获取code
        function getQueryVariable(variable) {
            // 参数 window.location.search
            var query = decodeURI(window.location.search.substring(1));
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
    </script>

</body>

</html>